<template>
  <div class="addaddress-wrap">
    <van-nav-bar
      :title="title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed
    />
    <div class="addaddress">
      <van-form @submit="onSubmit">
        <van-field
          v-model="linkman"
          name="linkman"
          label="联系人"
          placeholder="请填写收货人的姓名"
          :rules="[{ required: true }]"
        />
        <van-field name="gender" label="性别">
          <template #input>
            <van-radio-group v-model="gender" direction="horizontal">
              <van-radio checked-color="#e50055" name="1">男</van-radio>
              <van-radio checked-color="#e50055" name="0">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="phone"
          name="phone"
          label="手机号"
          placeholder="请填写收货手机号"
          :rules="[{ required: true }]"
        />
        <van-field
          readonly
          v-model="value"
          name="province"
          label="地址"
          placeholder="点击选择城市"
          @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-area
            title="标题"
            :area-list="areaList"
            @confirm="Confirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field
          v-model="house_number"
          name="house_number"
          label="门牌号"
          placeholder="例如：B座15楼1503室"
          :rules="[{ required: true }]"
        />
        <div style="margin: 16px">
          <van-button block size="large" color="#e50055" native-type="submit">
            {{ btnText }}
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import { useRoute, useRouter } from "vue-router";
import { areaList } from "@vant/area-data";
import axios from "../utils/axios";
export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      uid: route.query.uid,
      isEdit: route.query.isedit,
      title: route.query.isedit ? "新增地址" : "编辑地址",
      btnText: route.query.isedit ? "提交" : "保存",
      gender: "1",
      linkman: "",
      phone: "",
      value: "",
      showPicker: false,
      house_number: "",
      aid: "",
      areaList: areaList,
    });
    const onClickLeft = () => history.back();
    const Confirm = (e) => {
      state.value = "";
      e.forEach((item) => {
        state.value += " " + item.name;
      });
      state.showPicker = false;
      console.log(state.value);
    };
    const onSubmit = (values) => {
      console.log(values);
      values.user_id = state.uid;
      console.log(values);
      axios.post("/addaddress", values).then((res) => {
        if (res.data.code == 1) {
          router.push("/address");
        }
      });
    };
    return {
      ...toRefs(state),
      onClickLeft,
      Confirm,
      onSubmit,
    };
  },
};
</script>

<style lang="less" scoped>
.addaddress-wrap {
  .addaddress {
    margin-top: 48px;
  }
}
</style>